﻿<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>ECharts</title>
    <!-- 引入 echarts.js -->
    <script src="javascripts/echarts.js"></script>

	<style> /* 设置DIV全屏显示 */
	html,body{height:100%;}
	#main{
		height:auto!important; /*for ie6 bug and ie7+,moz,webkit 正确*/
		height:100%; /*修复IE6,all browser*/
		min-height:100%; /*for ie6 bug and ie7+,moz,webkit 正确*/
	}
　　</style>
</head>

<body>
    <input id="start_date" type="date" value=Date().getDate()/>
    <input id="end_date" type="date" value=Date().getDate()/>
    <input id="btnFresh" type="button" value="Fresh" />

	<!--<style>"width:100%;height:100%;"</style>-->
    <!-- 为ECharts准备一个具备大小（宽高）的Dom -->
    <!--<div id="main" style="width: 600px;height:400px;"></div>-->
	<!--style="width:100%;height:100%;"-->
	<div id="main"></div>
    <script type="text/javascript">
        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('main'));

		//app.title = '堆叠柱状图';

		var option = {
			tooltip : {
				trigger: 'axis',
				axisPointer : {            // 坐标轴指示器，坐标轴触发有效
					type : 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
				}
			},
			legend: {
				data:['直接访问','邮件营销','联盟广告','视频广告','搜索引擎','百度','谷歌','必应','其他']
			},
			grid: {
				left: '3%',
				right: '4%',
				bottom: '3%',
				containLabel: true
			},
			xAxis : [
				{
					type : 'category',
					data : ['周一','周二','周三','周四','周五','周六','周日']
				}
			],
			yAxis : [
				{
					type : 'value'
				}
			],
			series : [
				{
					name:'直接访问',
					type:'bar',
					data:[320, 332, 301, 334, 390, 330, 320]
				},
				{
					name:'邮件营销',
					type:'bar',
					stack: '广告',
					data:[120, 132, 101, 134, 90, 230, 210]
				},
				{
					name:'联盟广告',
					type:'bar',
					stack: '广告',
					data:[220, 182, 191, 234, 290, 330, 310]
				},
				{
					name:'视频广告',
					type:'bar',
					stack: '广告',
					data:[150, 232, 201, 154, 190, 330, 410]
				},
				{
					name:'搜索引擎',
					type:'bar',
					data:[862, 1018, 964, 1026, 1679, 1600, 1570],
					markLine : {
						lineStyle: {
							normal: {
								type: 'dashed'
							}
						},
						data : [
							[{type : 'min'}, {type : 'max'}]
						]
					}
				},
				{
					name:'百度',
					type:'bar',
					barWidth : 5,
					stack: '搜索引擎',
					data:[620, 732, 701, 734, 1090, 1130, 1120]
				},
				{
					name:'谷歌',
					type:'bar',
					stack: '搜索引擎',
					data:[120, 132, 101, 134, 290, 230, 220]
				},
				{
					name:'必应',
					type:'bar',
					stack: '搜索引擎',
					data:[60, 72, 71, 74, 190, 130, 110]
				},
				{
					name:'其他',
					type:'bar',
					stack: '搜索引擎',
					data:[62, 82, 91, 84, 109, 110, 120]
				}
			]
		};


        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);
    </script>
</body>
</html>